<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<title>商品列表</title>
	<link rel="stylesheet" href="../css/mui.min.css" />
	<link rel="stylesheet" href="../css/common.css" />
	<link rel="stylesheet" href="../iconfont/iconfont.css" />
	<style>
		.product-list {
			outline: #EFEFEF;
		}
		
		.product {
			background: #FFF;
			box-sizing: border-box;
			margin-bottom: 5px;
		}
		.product .thumbnail {
			padding: 5px 10px;
			width: 100%;
			height: 160px;
			text-align: center;
		}
		.product .thumbnail img {
			max-width: 100%;
			max-height: 100%;
		}
		.product:nth-child(2n+0) {
			border-left: 2px solid #EFEFEF;
		}
		
		.product:nth-child(2n+1) {
			border-right: 2px solid #EFEFEF;
		}
		.product .text-title {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.text-normal {
			color: #444;
			font-size: 14px;
		}
		
		.text-primary {
			color: #FC3A2E;
			font-size: 12px;
		}
		
		.text-gray {
			color: #d0d0d0;
			font-size: 14px;
		}
		
		.header input,
		.header button {
			line-height: 22px;
			height: 35px;
		}
		
		/*搜索下拉-综合-销量-价格*/
		.search-comprehensive, .search-sales, .search-price {
			display: none;
			border-top: 1px solid #DCDCDC;
			border-bottom: 1px solid #DCDCDC;
			position: fixed;
			width: 100%;
			top: 42px;
			z-index: 9999;
		}
		.icon-duihao {
		}
		.search-comprehensive > div, .search-sales > div, .search-price > div {
			border-top: 1px solid #DCDCDC;
		}
		
		.search-comprehensive > div:first-child, .search-sales > div:first-child, .search-price > div:first-child {
			border-top: none;
		}
		/*搜索下拉-筛选*/
		.search-screen {
			z-index: 9999;
			display: none;
			position: fixed;
			top: 42px;
			left: 0;
			right: 0;
			bottom: 0;
		}
		.search-screen form > div {
			border-bottom: 1px solid #DCDCDC;
		}
		.active {
			background: #FF5000;
		}
		
		.search-screen input[type=radio], .search-screen input[type=checkbox] {
			display: none;
		}
		.search-screen strong + label {
			color: #ff5000;
			font-size: 13px;
		}
		/*搜索下拉-筛选-价格区间*/
		.interval-input-text {
			width: 25%!important;
			height: 30px!important;
			background: #F5F5F5!important;
			border-radius: 10px!important;
			padding: 0 !important;
		}
		.search-interval input[type=radio] + span {
			width: 100%;
			border-radius: 5px;
			color: #fff!important;
			background: #F5F5F5;
		}
		.search-interval input[type=radio] + span a{color: #000;}
		.search-interval input[type=radio] + span a:last-child{font-size: 13px;}
		.search-interval input[type=radio]:checked + span {
			background: #ff5000!important;
		}
		.search-interval input[type=radio]:checked + span a{color: #fff;}
		/*搜索下拉-筛选-折扣服务*/
		.search-discount input[type=checkbox] + span {
			border-radius: 5px;
			background: #F5F5F5;
			padding: 5px 25px;
			display: inline-block;
			margin-top: 5px!important;
		}
		.search-discount input[type=checkbox]:checked + span {
			background: #ff5000!important;
			color: #fff!important;
		}
		/*搜索下拉-筛选-分类*/
		.search-category input[type=radio] + span {
			border-radius: 5px;
			background: #F5F5F5;
			padding: 5px 25px;
			display: inline-block;
			margin-top: 5px!important;
		}
		.search-category input[type=radio]:checked + span {
			background: #ff5000!important;
			color: #fff!important;
		}
		/*重置按钮 */
		.search-reset input[type=reset] {
			border-radius: 15px!important;
			padding: 3px 25px;
			color: #ff5000;
			background: #fff;
			border-color: #ff5000;
			margin-bottom: 50px;
		}
		.search-reset input[type=reset]:active {
			background: #ddd!important;
			color: #ff6000!important;
		}
		.search-menu {
			z-index: 999;
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
		}
		.product-list {
			margin-top: 44px;
		}
		.ally-data {
			background-color: #f83b35;
			padding: 2px 5px;
			color: #FFFFFF;
			position: absolute;
			top: 5px;
			right: 14px;
			font-size: 10px;
		}
		.ally-data .ally-bonus {
			display: none;
		}
		.product-desc {
			display: none !important;
		}
		.product-list.one-row .product {
			width: 100%;
		}
		.product-list.one-row .product .ally-data {
			right: 10px;
			font-size: 8px;
			padding: 0px 3px;
		}
		.product-list.one-row .product .thumbnail {
			width: 25%;
			padding: 5px 10px 0 10px;
			height: auto;
		}
		.product-list.one-row .product .text-desc {
			width: 75%;
			padding: 0 5px 0 0;
		}
		.product-list.one-row .product .text-title {
			margin-top: 5px;
		}
		.product-list.one-row .product .product-desc{
			display: block !important;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	</style>
</head>
<body>
	<!--商品列表 开始-->
	<div class="mui-row mui-text-center white search-menu bdr-b">
		<div class="mui-col-xs-3 pad-v" data-target=".search-comprehensive">
			<label>综合</label>
			<i class="iconfont icon-unfold"></i>
		</div>
		<div class="mui-col-xs-3 pad-v" data-target=".search-sales">
			<label>销量</label>
			<i class="iconfont icon-unfold"></i>
		</div>
		<div class="mui-col-xs-3 pad-v" data-target=".search-price">
			<label>价格</label>
			<i class="iconfont icon-unfold"></i>
		</div>
		<div class="mui-col-xs-3 pad-v filter">
			<label>筛选</label>
			<i class="iconfont icon-unfold"></i>
		</div>
	</div>
	<!--商品列表 结束-->
	
	<!--商品列表 下拉-综合-->
	<div class="pad-h-md white search search-comprehensive">
		<div class="pad-v" data-column="views" data-type="asc">
			<span>人气从低到高</span>
			<i class="iconfont icon-duihao text-primary mui-pull-right"></i>
		</div>
		<div class="pad-v" data-column="views" data-type="desc">
			<span>人气从高到低</span>
			<i class="iconfont icon-duihao text-primary mui-pull-right"></i>
		</div>
		<div class="pad-v" data-column="goods_price" data-type="asc">
			<span>价格从低到高</span>
			<i class="iconfont icon-duihao text-primary mui-pull-right"></i>
		</div>
		<div class="pad-v" data-column="goods_price" data-type="desc">
			<span>价格从高到低</span>
			<i class="iconfont icon-duihao text-primary mui-pull-right"></i>
		</div>
		<div class="pad-v" data-show-type="">
			<span>切换显示方式</span>
		</div>
	</div>
	<!--商品列表 下拉-销量-->
	<div class="pad-h-md white search search-sales">
		<div class="pad-v" data-column="goods_salenum" data-type="asc">
			<span>销量从低到高</span>
			<i class="iconfont icon-duihao text-primary mui-pull-right"></i>
		</div>
		<div class="pad-v" data-column="goods_salenum" data-type="desc">
			<span>销量从高到低</span>
			<i class="iconfont icon-duihao text-primary mui-pull-right"></i>
		</div>
	</div>
	<!--商品列表 下拉-价格-->
	<div class="pad-h-md white search search-price">
		<div class="pad-v" data-column="goods_price" data-type="asc">
			<span>价格从低到高</span>
			<i class="iconfont icon-duihao text-primary mui-pull-right"></i>
		</div>
		<div class="pad-v" data-column="goods_price" data-type="desc">
			<span>价格从高到低</span>
			<i class="iconfont icon-duihao text-primary mui-pull-right"></i>
		</div>
	</div>
	
	<!--商品 开始-->
	<div class="mui-content mui-scroll-wrapper container-pull-refresh">
		<div class="mui-scroll">
			<!--数据列表-->
			<section class="mui-table-view mui-row scroll-data product-list" data-tpl="tpl-product">
			</section>
		</div>
	</div>
	<!--商品 结束-->
	
	<!-- 商品模板 开始 -->
	<script type="text/html" id="tpl-product">
		{{each data as item idx}}
		<div class="mui-col-xs-6 product" data-id="{{item.id}}">
			<div class="mui-row">
				<div class="mui-col-xs-12 thumbnail">
					<img src="{{item.goods_extend.thumb | thumb}}" />
					{{if '2' == item.is_distribution}}
					<span class="ally-data">
						<span class="ally-desc">可分销</span>
						<span class="ally-bonus">{{item.bonus}}%</span>
					</span>
					{{/if}}
				</div>
				<div class="mui-col-xs-12 pad-h-md text-desc">
					<label class="mui-block text-normal text-title">{{item.title}}</label>
					<div class="mui-block pad-v-sm">
						<small>销量：{{item.goods_salenum}}</small>
						<label class="mui-block text-primary mui-pull-right">￥{{item.goods_extend.goods_price | price}}</label>
					</div>
					<label class="mui-block text-gray product-desc">{{item.description}}</label>
				</div>
			</div>
		</div>
		{{/each}}
	</script>
	<!-- 商品模板 结束 -->
	
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.ba-bbq.min.js"></script>
	<script type="text/javascript" src="../js/template.js"></script>
	<script type="text/javascript" src="../js/app.js"></script>
	<script type="text/javascript" src="product.search.scroll.js" ></script>
</body>
</html>
